<template>
  <div>
    <el-card>
      <!--三级分类全局组件-->
      <Category :scene="scene"/>
    </el-card>

    <el-card style="margin: 10px 0">
      <div v-show="scene==0">
        <!--添加SPU按扭-->
        <el-button type="primary" size="default" icon="Plus" :disabled="!categoryStore.c3Id" @click="addSpu">添加SPU
        </el-button>

        <el-table stripe style="margin: 10px 0" border :data="records">
          <el-table-column label="序号" align="center" type="index" width="80px"></el-table-column>
          <el-table-column label="SPU名称" prop="spuName"></el-table-column>
          <el-table-column label="SPU描述" prop="description" show-overflow-tooltip></el-table-column>
          <el-table-column label="最后更新时间" prop="updateTime"></el-table-column>
          <el-table-column label="SPU操作">
            <template #="{row}">
              <el-button type="primary" size="small" icon="Plus" title="添加SKU" @click="addSku(row)"></el-button>
              <el-button type="warning" size="small" icon="Edit" title="修改SKU" @click="updateSpu(row)"></el-button>
              <el-button type="info" size="small" icon="View" title="查看SKU列表" @click="getSkuList(row)"></el-button>
              <el-popconfirm :title="`你确定要删除${row.spuName}？`" width="200px" @confirm="deleteSpu(row)">
                <template #reference>
                  <el-button type="danger" size="small" icon="Delete" title="删除SKU"></el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>

        <!--分页器-->
        <el-pagination
            v-model:current-page="pageNo"
            v-model:page-size="pageSize"
            :page-sizes="[5,7,9,11]"
            :background="true"
            layout="prev,pager,next,jumper,->,sizes,total"
            :total=total
            @current-change="getSpuData"
            @size-change="changeSize"/>

      </div>
      <!--添加spu|修改spu子组件-->
      <SpuForm ref="SpuFormVc" v-show="scene==1" @changeScene="changeScene"/>
      <!--添加sku的子组件-->
      <SkuForm ref="SkuFormVc" v-show="scene==2" @changeScene="changeScene"/>
      <!--dialog显示sku数据-->
      <el-dialog v-model="showSku" title="SKU列表">
        <el-table stripe border :data="skuList">
          <el-table-column label="sku名字" show-overflow-tooltip prop="skuName"></el-table-column>
          <el-table-column label="sku价格" prop="price"></el-table-column>
          <el-table-column label="sku重量" prop="weight"></el-table-column>
          <el-table-column label="sku图片">
            <template #="{row}">
              <img :src="row.skuDefaultImg" style="width: 100px ;height: 100px" alt="">
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>

    </el-card>


  </div>
</template>

<script setup lang="ts">
import {ref, watch} from "vue";
//@ts-ignore
import useCategoryStore from "@/piniaStore/moudules/categoryStore.ts";
//@ts-ignore
import {T_SkuData, T_SkuInfoResponseData, T_SpuData} from "@/api/product/spu/type.ts";
import {ElMessage} from "element-plus";
//引入子组件
//@ts-ignore
import SpuForm from "@/views/product/spu/spuForm.vue";
//@ts-ignore
import SkuForm from "@/views/product/spu/skuForm.vue";
//@ts-ignore
import {reqSkuList, reqRemoveSpu} from "@/api/product/spu/spuApi.ts";


//拿到分类仓库
let categoryStore = useCategoryStore();
//场景的数值
let scene = ref<number>(0);//0:显示已有的SPU，1：添加|修改已有的SPU 2：添加SKU结构
//分页器起始值
let pageNo = ref<number>(1);
//每一页展示几条数据
let pageSize = ref<number>(5);
//存储服务器返回的数据
let records = ref<T_SpuData[]>([]);
//存储spu的总条数
let total = ref<number>(0);
//拿到子组件VC实例
let SpuFormVc = ref();
//拿到Sku的实例VC
let SkuFormVc = ref();
//存储展示的sku的数据
let skuList = ref<T_SkuData[]>([]);
//控制sku对话框的显示隐藏
let showSku = ref<boolean>(false);


//监听仓库的c3Id
watch(() => categoryStore.c3Id, () => {
  getSpuData();
});

//获取spu数据
const getSpuData = async (pager = 1) => {
  //修改当前的页码
  pageNo.value = pager;
  //有了三级分类再发请求
  if (!categoryStore.c3Id) return;
  try {
    //通知仓库拿spu数据
    let result = await categoryStore.getSpus(pageNo.value, pageSize.value);
    records.value = result.data.records;
    //存储总条数
    total.value = result.data.total;
  } catch (error) {
    ElMessage({
      type: "error",
      message: (error as Error).message
    })
  }
}

//分页器下拉菜单发生变化时触发
const changeSize = () => {
  getSpuData();
}

//添加spu方法
const addSpu = () => {
  //切换场景1
  scene.value = 1;
  //通过vc实例调用子组件方法初始化数据
  SpuFormVc.value.initAddSpu(categoryStore.c3Id);
}

//修改spu 方法
const updateSpu = (row: T_SpuData) => {
  //切换场景1
  scene.value = 1;
  //调用子组件实例方法获取完整的已有的SPU数据
  SpuFormVc.value.initSpuData(row);
}

//子组件SpuForm绑定自定义事件：让子组件通知父组件切换场景为0
const changeScene = (obj: any) => {
  //子组件Spuform点击取消变为场景0，展示已有的spu
  scene.value = obj.scene;
  if (obj.params == "update") {
    //如果是更新：留在当前页
    getSpuData(pageNo.value);
  } else {
    //否则返回第一页
    getSpuData();
  }
}

//添加SKU方法的回调
const addSku = (row: T_SpuData) => {
  //点击按钮，切换场景2;
  scene.value = 2;
  SkuFormVc.value.initSkuData(row);
}

//查看sku列表的回调函数
const getSkuList = async (spu: T_SpuData) => {
  let result: T_SkuInfoResponseData = await reqSkuList(spu.id);
  if (result.code == 200) {
    skuList.value = result.data;
    showSku.value = true;//显示对话框
  } else {
    ElMessage({
      type: "error",
      message: "网络错误，获取sku数据失败"
    })
  }

}
//删除已有的spu
const deleteSpu = async (spu: T_SpuData) => {
  let rewsutl = await reqRemoveSpu(spu.id)
  if (rewsutl.code == 200) {
    ElMessage({
      type: "success",
      message: "删除成功"
    });
    //获取更新后的spu数据
    getSpuData(records.value.length > 1 ? pageNo.value : pageNo.value - 1);
  } else {
    ElMessage({
      type: "error",
      message: "删除失败"
    })
  }

}

</script>

<style scoped>

</style>